<template>
	<view class="record">
		<view class="record-title">
			<view class="record-title-item one">时间</view>
			<view class="record-title-item">变动</view>
			<view class="record-title-item">余额</view>
			<view class="record-title-item note">类型</view>
		</view>
		<van-tabs :ifbuy="true" :active="active" color="#3e527e"  @change="onTabChange">
			<van-tab title="可售明细">
				<tab1 :activeTAB="active" ref="tab1"></tab1>
			</van-tab>
			<van-tab title="钱包明细">
				<tab2 :activeTAB="active" ref="tab2"></tab2>
			</van-tab>
			<van-tab title="资产明细">
				<tab3 :activeTAB="active" ref="tab3"></tab3>
			</van-tab>
			<van-tab title="额度明细">
				<tab4 :activeTAB="active" ref="tab4"></tab4>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import tab1 from './tab/tab1.vue';
	import tab2 from './tab/tab2.vue';
	import tab3 from './tab/tab3.vue';
	import tab4 from './tab/tab4.vue';
	export default {
		components: {
			tab1,
			tab2,
			tab3,
			tab4
		},
		data() {
			return {
				active: 0,
				lastActive: 0,
				scrollTop: {
					top0: 0,
					top1: 0,
					top2: 0,
					top3: 0
				},
			}
		},
		onLoad(op) {
			this.active = Number(op.id)
		},
		onShow () {
			this.$refs['tab'+(this.active+1)].priceDatail(this.active+1);
		},
		methods: {
			onTabChange (e) {
				this.lastActive = this.active
				this.active = e.detail.index;
				this.$refs['tab'+(e.detail.index+1)].priceDatail(e.detail.index+1);
				uni.createSelectorQuery().selectViewport().scrollOffset(res => {
				  this.scrollTop['top'+this.lastActive] = res.scrollTop
				}).exec();
				uni.pageScrollTo({
					scrollTop: this.scrollTop['top'+this.active],
					duration: 0
				})
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.record {
		&-title {
			position: fixed;
			z-index: 1;
			top: 44px;
			right: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			background-color: #fff;
			&-item {
				flex: 1;
				padding: 20upx 10upx;
				color: #9b9b9b;
				&.note {
					width: 180upx;
					flex: none;
				}
				&.note {
					width: 120upx;
					flex: none;
				}
			}
		}
	}
</style>
